<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em id="a_count">10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em id="d_count">123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em id='c_count'>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em id='dc_count'>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>
    <script src="./libs/echarts.js"></script>
    <script src="./js/http.js"></script>
    <script>
        $(function () {
            get_data();
            get_curve_show();
            get_pie_show();
            get_column_show()
        })



        //更新数据
        function get_data() {
            myAjax('get', 'http:localhost:8080/api/v1/admin/data/info', null, function (resData) {
                console.log();

                $('#a_count').html(resData.totalArticle)
                $('#b_count').html(resData.dayArticle)
                $('#c_count').html(resData.totalComment)
                $('#bc_count').html(resData.dayComment)

            });
        }


        //折线图参数设置
        function get_curve_show() {

            myAjax('get', 'http:localhost:8080/api/v1/admin/data/article', null, function (resData) {

                //数组形式获取日期及数据
                let xArrData = resData.date.map(item => item.date);
                let Datas = resData.date.map(item => item.count)

                //调用-更新图表数据
                curve_show(xArrData, Datas)


            })
        }




        //折线图
        function curve_show(xArrData, Datas) {
            var myChart1 = echarts.init(document.getElementById('curve_show'));
            option = {
                title: {
                    text: '文章日新增趋势图',
                    left: 'center',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xArrData, //让数据从服务器      //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                //鼠标移动到轴上即出现提示面板
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                series: [{
                    data: Datas, //[820, 932, 901, 934, 1290, 1330, 1320],//从服务器设置真实数据
                    type: 'line',
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'red'
                        }, {
                            offset: 1,
                            color: 'blue'
                        }])
                    },
                    //圆滑效果
                    smooth: true,
                    // 设置折线的每一个数据显示
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                }]



            }
            myChart1.setOption(option);

        }



        //饼图参数设置
        function get_pie_show() {

            myAjax('get', 'http:localhost:8080/api/v1/admin/data/category', null, function (resData) {
                // console.log(resData);
                // "date": [
                //     {
                //         "name": "爱旅行",
                //         "articles": 41
                //     },
                //   转成
                //     {
                //     "name": "爱旅行",
                //     "value": 41
                //       },

                let names = resData.date.map(item => item.name)
                let datas = resData.date.map(item => ({ name: item.name, value: item.articles }))

                pie_show(names, datas);
            });
        }

        // function 哦哦破(item) {
        //     ({ name: item.name, value: item.article })
        // }


        //pie-chert
        function pie_show(names, datas) {
            var myChart2 = echarts.init(document.getElementById('pie_show'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    left: 10,
                    data: names,//['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        // label: {
                        //     show: false,
                        //     position: 'center'
                        // },
                        labelLine: {
                            show: true
                        },
                        data: datas

                        // [
                        //     { value: 335, name: '直接访问' },
                        //     { value: 310, name: '邮件营销' },
                        //     { value: 234, name: '联盟广告' },
                        //     { value: 135, name: '视频广告' },
                        //     { value: 1548, name: '搜索引擎' }
                        // ]
                    }
                ]
            };

            myChart2.setOption(option);



        }

        //柱图参数设置
        function get_column_show() {
            myAjax('get', 'http:localhost:8080/api/v1/admin/data/visit', null, function (resData) {
                // console.log(resData);
                // {
                //     "code": 200,
                //         "msg": "日访问量统计数据获取成功",
                //             "data": {
                //         "2019-05-28": 13016,
                //             "2019-05-27": 11503
                //     }
                // }

                let xdata = [];
                let sdata = [];
                let data = resData.data;
                for (let key in data) {

                    console.log(key);
                    console.log(data[key]);

                    xdata.push(key)
                    sdata.push(data[key])

                }


                column_show(xdata, sdata);
            })


        }



        //colum_show
        function column_show(xdata, sdata) {
            var myChart3 = echarts.init(document.getElementById('column_show'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                // 提示信息
                tooltip: {},
                // 图例
                legend: {
                    data: ['总量']
                },
                // x轴
                xAxis: {
                    // boundaryGap: false,
                    data: xdata,

                    // ["上海", "广州", "北京", "深圳", "合肥", "", "......", "", '杭州', '厦门', '济南', '成都', '重庆'],

                    //轴标签:文字变色
                    axisLabel: {
                        color: "#4c9bfd",
                    },

                    axisLine: {
                        show: false
                    },



                },
                //y轴
                yAxis: [{
                    // type: 'value',
                    //轴标签:文字变色
                    axisLabel: {
                        color: '#4c9bfd',
                    },
                    //y轴线隐藏
                    axisLine: { show: false },

                    //y:分模线
                    splitLine: {
                        lineStyle: {
                            color: '#006f83'
                        }
                    }
                }],

                grid: {
                    left: 40,
                    right: 4,
                    top: 10,
                    bottom: 20,
                    show: true,
                    borderColor: "#006377",

                },

                //类型,系列
                series: [{
                    itemStyle: {
                        //渐变色
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00f2f7' },
                            { offset: 0.5, color: '#00ade3' },
                            { offset: 1, color: '#0069d0' }
                        ]
                        )
                    },
                    // name: '总量',
                    // bar:条行图 / pie:饼图
                    type: 'bar',

                    data: sdata,
                    // [2100, 1900, 1700, 1550, 1400,

                    //     900, 800, 650, 500, 300
                    // ]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart3.setOption(option);


        }
    </script>
</body>

</html>